<template>
  <view class="comment-list u-demo-block">
	<u-toast ref="uToast"></u-toast>
	<view v-if="comments != null && comments.length > 0" class="u-demo-block__content" v-for="(item, index) in comments" :key="index">
		<view class="album">
			<view class="album__avatar">
				<image
				    :src="item.avatar ? item.avatar : '/static/img/avatar.png'"
				    mode=""
				    style="width: 32px;height: 32px;"
				></image>
			</view>
			<view class="album__content">
				<u--text
				    :text="item.nickName"
				    type="primary"
				    bold
				    size="17"
				></u--text>
				
				<view class="swipe-action u-border-top u-border-bottom" style="border-top-style: hidden;border-bottom-style: hidden;">
					<view class="swipe-action__content">
						<u-parse margin="0 0 8px 0" :content="item.label"></u-parse>
						<u--text style="display: inline-block;width: 50%;"
							margin="10px 0 8px 0"
						    :text="item.createTime"
						    size="12"
						></u--text>
						<u--text margin="10px 0 8px 0" style="display: inline-block;width: 20%;margin-left: 20rpx;" text="回复" size="12" openType="share" type="success" @click="clickHandler(item.id, item.detailId)"></u--text>
						
					</view>
				</view>
			</view>
		</view>
			
			<view v-if="item.children && item.children.length" class="children-comments">
			  <review-detail :comments="item.children"></review-detail>
			</view>
			
	</view>
	<u-empty v-else></u-empty>
	
	<u-modal :show="show"  :title="title"
	 confirmText="回复"
	 @confirm="confirm" @cancel="cancel" :showCancelButton="true">
				<view class="slot-content" style="width: 100%;">
					<u--textarea v-model="form.content" maxlength="-1" count autoHeight placeholder="说点什么吧~" confirm-type="send"></u--textarea>
				</view>
			</u-modal>
  </view>
</template>
 
<script>
	import * as reviewApi from '@/api/business/review'
	
export default {
  name: 'ReviewDetail',
  props: {
    comments: Array
  },
  data(){
	 return {
		show: false,
		title: '回复评论',
		form: {
			parentId: 0,
			content: undefined,
			detailId: undefined
		}
	 } 
  },
  methods:{
	clickHandler(id, detailId){
		this.form.parentId = id
		this.form.detailId = detailId
		this.show = true;
	},
	confirm(){
		if(this.form.content != null && this.form.content != ''){
			reviewApi.reviewAdd(this.form).then(res => {
				this.show = false;
				uni.$emit('update',{msg:'getReview'})
			})
		}else{
			this.$refs.uToast.show({
				type: 'error',
				icon: false,
				title: '失败主题',
				message: "评论内容不能为空",
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
			})
		}
	},
	cancel(){
		this.show = false;
	}
  }
}
</script>
 
<style lang="scss">
/* 样式代码 */
.comment-list {
  padding: 10rpx;
}
.comment {
  /* 根据需要添加样式 */
}
.children-comments {
  margin-left: 5%;
}

.album__avatar{
	background-color: $u-bg-color;
	padding: 5px;
	border-radius: 3px;
	width: 32px;
	height: 32px;
}

.album__content {
			margin-left: 10px;
			flex: 1;
		}
.album{
	@include flex;
	align-items: flex-start;
}
	/* .album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	} */
	
	.u-page {
		padding: 0;
	}
	
	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}
</style>